<template>
  <div class="company-detail-wrap">
    <div class="company-detail-banner"></div>
    <div class="margin-align">
      <div class="company-detail-content">
        <div class="content-left">
          <div class="tab">
            <div class="tab-item"
                 v-for="item in tabNameData"
                 :key="item.title"
                 :class="item.value===curTab?'tabActive':''"
                 @click="changeTab(item.value)">{{item.title}}<span v-if="item.value==='positionJob'">(7)</span></div>
          </div>
          <company-home v-if="curTab==='companyHome'"></company-home>
          <position-job v-if="curTab==='positionJob'"></position-job>
          <interview-evaluate v-if="curTab==='interviewEvaluate'"></interview-evaluate>
        </div>
        <div class="content-right">
          <div class="company-team">
            <div class="detail-main-title">公司团队<div class="arrow"><span @click="changeLast">{{lt}}</span><span>|</span><span @click="changeNext">{{gt}}</span></div></div>
            <div>
            <div class="team-info">
              <div class="team-top">
                <img :src="companyTeam[curTeamMember].photo" class="member-photo">
                <div class="member-info">
                  <p>{{companyTeam[curTeamMember].name}}</p>
                  <p>{{companyTeam[curTeamMember].position}}</p>
                </div>
              </div>
              <div class="member-intro">{{companyTeam[curTeamMember].intro}}</div>
            </div>
            </div>
          </div>
          <div class="company-welfare">
            <div class="detail-main-title">公司福利</div>
            <div class="welfare-list">
              <div class="welfare" v-for="item in companyWelfareList" :key="item">{{item}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import companyHome from '@/components/talents/companyDetail/companyHome' // 公司主页
import positionJob from '@/components/talents/companyDetail/positionJob' // 招聘职位
import interviewEvaluate from '@/components/talents/companyDetail/interviewEvaluate' // 面试评价
import talents from '@/api/talents'
export default {
  layout: 'teach',
  data () {
    return {
      tabNameData: [ // tab
        {
          title: '公司主页',
          value: 'companyHome'
        },
        {
          title: '招聘职位',
          value: 'positionJob'
        },
        {
          title: '面试评价',
          value: 'interviewEvaluate'
        }
      ],
      curTab: 'companyHome', // 当前tab
      lt: '<',
      gt: '>',
      companyTeam: talents.companyTeam,
      curTeamMember: 0, // 当前团队成员
      companyWelfareList: talents.companyWelfareList
    }
  },
  components: {
    companyHome,
    positionJob,
    interviewEvaluate
  },
  methods: {
    // 切换tab
    changeTab (val) {
      this.curTab = val
    },
    // 切换上一张
    changeLast () {
      if (this.curTeamMember === 0) return
      this.curTeamMember--
    },
    // 切换下一张
    changeNext () {
      if (this.curTeamMember > this.companyTeam.length - 2) return
      this.curTeamMember++
    }
  }
}
</script>
<style lang="stylus" scoped>
.company-detail-wrap {
  padding-bottom: 60px;
  background-color: #F6F6F6
  .company-detail-banner {
    background: url('/img/talents/company/banner.png') no-repeat center;
    height: 303px;
    background-color: #4575fe;
  }
  .company-detail-content {
    margin-top: 30px;
    display: inline-block
    .content-left {
      width: 830px;
      background: #FFFFFF;
      border-radius: 16px;
      margin-right: 20px;
      padding: 0 20px 20px;
      float:left
      .tab {
        display: flex;
        align-items: flex-start;
        height: 62px;
        .tab-item {
          font-size: 20px;
          font-family: SourceHanSansCN-Medium, SourceHanSansCN;
          font-weight: 500;
          color: #101010;
          margin-right: 60px;
          padding-bottom: 10px;
          border-bottom: 1px solid transparent;
          cursor:pointer;
          margin-top: 17px;
          &:hover {
            color: #4576FE;
          }
        }
        .tabActive {
          color: #4576FE;
          border-bottom: 1px solid #4576FE
        }
      }
    }
    .content-right {
      width: 350px;
      float:left
      .company-team {
        width: 100%;
        background: #FFFFFF;
        border-radius: 16px;
        .team-info {
          padding: 20px;
          display: inline-block
          .team-top {
            display: inline-block 
            .member-photo {
              width: 90px;
              height: 90px;
              float: left
            }
            .member-info {
              margin-left: 16px;
              float: left
              p {
                font-size: 26px;
                font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                font-weight: 400;
                color: #181818;
                line-height: 26px;
                margin-top: 13px
                &:last-child {
                  padding: 6px 8px;
                  background: #FAFAFA;
                  border-radius: 2px;
                  border: 1px solid #F1F1F1;
                  font-size:14px;
                  color: #A1A1A1;
                  margin-top: 18px;
                  line-height: 14px
                }
              }
            }
          }
          .member-intro {
            font-size: 14px;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: #404040;
            padding: 13px 20px;
            background: #FAFAFA;
            border-radius: 8px;
            line-height: 28px;
            margin-top: 20px
          }
        }
      }
      .company-welfare {
        margin-top: 20px;
        width: 100%;
        background: #FFFFFF;
        border-radius: 16px;
        .welfare-list {
          display: inline-block;
          padding: 0 20px 7px
          .welfare {
            float: left;
            font-size: 14px;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: #181818;
            line-height: 14px;
            padding: 14px;
            background: #F6F6F6;
            border-radius: 8px;
            margin-right: 10px;
            margin-bottom: 10px
          }
        }
      }
    }
  }
}
</style>